<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "企业法务"
  },
  // 暂时需要登录，后续再改
  "needLogin": true
}
</route>

<script lang="ts" setup>
import apiUser from '@/api/user'
import circle_1 from '../static-assets/circle/circle_1.png'
import circle_2 from '../static-assets/circle/circle_2.png'
import circle_3 from '../static-assets/circle/circle_3.png'
import cj_ser_1 from '../static-assets/circle/cj_ser_1.png'
import cj_ser_2 from '../static-assets/circle/cj_ser_2.png'
import cj_ser_3 from '../static-assets/circle/cj_ser_3.png'
import cj_ser_four from '../static-assets/circle/cj_ser_four.png'
import cj_ser_one from '../static-assets/circle/cj_ser_one.png'
import cj_ser_three from '../static-assets/circle/cj_ser_three.png'
import cj_ser_two from '../static-assets/circle/cj_ser_two.png'
import guquan from '../static-assets/circle/guquan.png'
import hunyin from '../static-assets/circle/hunyin.png'
import huo from '../static-assets/circle/huo.png'
import peichang from '../static-assets/circle/peichang.png'
import qian from '../static-assets/circle/qian.png'
import yongong from '../static-assets/circle/yongong.png'
import zhishi from '../static-assets/circle/zhishi.png'

const videoUrl = 'https://us-stock5.xpccdn.com/340e67b5-6498-46d3-bed7-dcf453e05cfc.mp4'

interface riskItem {
  id: number
  title: string
  description: string
  circleImg: string
  iconleft: string
  iconright?: string
}

const services = ref<riskItem[]>([
  {
    id: 1,
    title: '用工问题',
    description: '劳动仲裁 / 公司赔偿 / 薪酬社保',
    circleImg: cj_ser_one,
    iconleft: yongong,
    iconright: huo,
  },
  {
    id: 2,
    title: '应收账款',
    description: '委托催收 / 强制执行 / 保留证据',
    circleImg: cj_ser_two,
    iconleft: qian,
  },
  {
    id: 3,
    title: '股权问题',
    description: '股权转让 / 股权分配 / 员工激励',
    circleImg: cj_ser_three,
    iconleft: guquan,
  },
  {
    id: 4,
    title: '知识产权',
    description: '专利注册 / 专利侵权 / 商业秘密',
    circleImg: cj_ser_four,
    iconleft: zhishi,
  },
])

const accountingPractices = ref<riskItem[]>([
  {
    id: 1,
    title: '损害赔偿',
    description: '人身伤害 / 交通事故 / 名誉侵权',
    circleImg: cj_ser_one,
    iconleft: peichang,
    iconright: huo,
  },
  {
    id: 2,
    title: '婚姻继承',
    description: '财产分配 / 子女继承 / 保留证据',
    iconleft: hunyin,
    circleImg: cj_ser_two,
  },
])

const accounting = ref([
  {
    id: 1,
    title: '律师函',
    description: '专业起草,律所盖章',
    circle: circle_3,
    cj_ser: cj_ser_1,
  },
  {
    id: 2,
    title: '写文书',
    description: '定制文本,省时省力',
    circle: circle_2,
    cj_ser: cj_ser_2,
  },
  {
    id: 3,
    title: '改合同',
    description: '律师审查,规避风险',
    circle: circle_1,
    cj_ser: cj_ser_3,
  },
])

function consultNow() {
  apiUser.getCooperateApplyUnlogin({
    cooperateType: '',
    contactName: 1,
    contents: '企业法务',
  }).then((res) => {
    console.log(res)
  })
  uni.showToast({
    title: '咨询请求已发送',
    icon: 'success',
  })
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <view class="m-20rpx flex items-center justify-between rounded-12rpx bg-white p-15rpx">
      <view class="flex">
        <image
          src="../static-assets/legalserviceImg/legalaffairs.png"
          mode="scaleToFill"
          class="mr-20rpx h-48rpx w-48rpx"
        />
        <view>
          <view class="text-lg font-bold">
            专属法务团队
          </view>
          <view class="text-[20rpx] text-gray-500">
            5分钟内急速响应
          </view>
        </view>
      </view>
      <wd-button custom-class="red-btn" @click="consultNow">
        立即咨询
      </wd-button>
    </view>

    <!-- “路”有风险 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            “路”有风险
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.circleImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-10rpx flex items-center font-500">
                  <image
                    :src="service.iconleft"
                    mode="scaleToFill"
                    class="h-34rpx w-34rpx"
                  />
                  <view class="px-10rpx text-[28rpx]">{{ service.title }}</view>
                  <image
                    v-if="service.iconright"
                    :src="service.iconright"
                    mode="scaleToFill"
                    class="h-36rpx w-36rpx"
                  />
                </view>
                <view class="line-clamp-2 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- “家”有难题 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            “家”有难题
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in accountingPractices"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.circleImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-10rpx flex items-center font-500">
                  <image
                    :src="service.iconleft"
                    mode="scaleToFill"
                    class="h-34rpx w-34rpx"
                  />
                  <view class="px-10rpx text-[28rpx]">{{ service.title }}</view>
                  <image
                    v-if="service.iconright"
                    :src="service.iconright"
                    mode="scaleToFill"
                    class="h-36rpx w-36rpx"
                  />
                </view>
                <view class="line-clamp-2 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- “文本”有规范 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            “文本”有规范
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-3 gap-15rpx">
            <view
              v-for="service in accounting"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 px-20rpx py-40rpx"
            >
              <image :src="service.cj_ser" mode="aspectFill" class="absolute inset-0 h-full w-full" :lazy-load="true" />
              <view class="relative z-10">
                <view class="mb-10rpx flex items-center truncate text-28rpx font-bold">
                  {{ service.title }}
                  <image
                    :src="service.circle"
                    mode="aspectFill"
                    class="ml-8rpx h-26rpx w-26rpx"
                  />
                </view>
                <view
                  v-for="(line, i) in service.description.split(',')"
                  :key="i"
                  class="line-clamp-3 break-all text-24rpx text-#666"
                >
                  {{ line }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="mt-20rpx px-20rpx">
      <view class="mx-auto w-full overflow-hidden rounded-12rpx">
        <video
          id="myVideo"
          class="w-full"
          :src="videoUrl"
          controls
          :autoplay="false"
          :initial-time="0"
          enable-progress-gesture
          :show-fullscreen-btn="true"
          :show-center-play-btn="true"
          object-fit="contain"
        />
      </view>
    </view> -->
  </view>
</template>
